<template>
  <el-dialog width="980px" :title="title" :visible.sync="visible">
    <el-form ref="form" :rules="rules" :model="model" :disabled="disableSubmit" label-width="160px" v-loading="loading">
      <el-form-item prop="companyId" label="归还公司">
        <select-company v-model="model.companyId" ></select-company>
      </el-form-item>
      <el-form-item label="归还人" prop="returner">
        <el-input v-model="model.returner"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="telphone">
        <el-input v-model="model.telphone"></el-input>
      </el-form-item>
      <el-form-item label="归还时间" prop="returnDate">
        <el-date-picker
          type="date"
          placeholder="选择日期"
          v-model="model.returnDate"
        ></el-date-picker>
      </el-form-item>
      <el-form-item prop="isDamage" label="是否损坏">
        <el-switch v-model="model.isDamage"></el-switch>
      </el-form-item>
      <el-form-item prop="photo" label="资产照片">
        <image-upload v-model="model.photo"></image-upload>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="model.note"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Vue from "vue";
import SelectCompany from "@/components/SelectCompany";
import ImageUpload from "@/components/ImageUpload";
import { MessageBox, Message, Notification } from "element-ui";
import pick from "lodash.pick";
import { ACCESS_TOKEN } from "@/store/mutation-types";
import { getAction, deleteAction, putAction, postAction } from "@/api/manage";

export default {
  name: "ReturnModal",
  components: { SelectCompany, ImageUpload },
  data() {
    return {
      title: "归还",
      visible: false,
      loading: false,
      multipleSelection: [],
      disableSubmit:false,
      model: {},
      url: {}, // 新增资产表单验证
      rules: {
        companyId: [
          { required: true, message: "请选择归还公司", trigger: "change" }
        ],
        returnDate: [
          { required: true, message: "请输入归还时间", trigger: "blur" }
        ],
        returner: [
          { required: true, message: "请输入归还人", trigger: "blur" }
        ],
        telphone: [
          { required: true, message: "请输入联系电话", trigger: "blur" }
        ],
        photo: [{ required: true, message: "请选择照片", trigger: "blur" }]
      }
    };
  },
  created() {
    const token = Vue.ls.get(ACCESS_TOKEN);
    this.headers = { "X-Access-Token": token };
  },
  methods: {
    refresh() {},
    add(selection) {
      if (selection.length == 0) {
        this.$message.warning("请选择需要归还的资产信息！");
        return;
      }
      this.refresh();
      this.edit({ assetIds: selection.map(row => row.id) ,isDamage:false});
    },
    edit(records) {
      // this.resetScreenSize(); // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
      let that = this;
      if (that.$refs.form) {
        that.$refs.form.resetFields();
      }
      that.model = Object.assign({}, records);
      //that.form.setFieldsValue(pick(this.model,'username','sex','realname','email','phone','activitiSync','workNo','telephone','post'))
      this.visible = true;
    },

    handleSubmit() {
      const that = this;
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true;
          let promise;
          promise = postAction(
            "/retrocede/retrocede",
            Object.assign({}, this.model)
          );
          promise
            .then(res => {
              if (res.success) {
                this.$message.success(res.message);
                that.$emit("ok");
                that.close();
              } else {
                that.$message.warning(res.message);
              }
            })
            .finally(() => {
              that.loading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleCancel() {
      this.close();
    },
    close() {
      this.$emit("close");
      this.visible = false;
    }
  }
};
</script>

<style scoped>
</style>
